<template>
  <h2>通过泛型参数来定义props的类型</h2>
  <div class="note">
    <p>1. 强烈推荐这种方式，有利于约束类型，且有属性提示</p>
    <p>2. 语法为ts,简洁清晰</p>
    <p>3. 支持复杂的类型，如接口，对象，函数等</p>
    <p>4. 也可以在定义的同时赋值+解构</p>
  </div>

  <hr class="hr-style">
  <!-- <div class="test">
    <p>{{ props.title }}</p>
    <p>{{ props.user }}</p>
    <p>{{ props.msg }}</p>
  </div> -->

  <div class="test">
    <p>{{ title }}</p>
    <p>{{ user }}</p>
    <p>{{ msg }}</p>
  </div>
</template>

<script setup lang="ts">
export interface Iuser {
  id?: number
  name: string
  sex: string
  age: number
}

// 1. 通过泛型参数来定义props的类型
// const props = defineProps<{
//   title: string
//   user: Iuser
//   msg?: string
// }>()

// 2. 通过泛型参数来定义props的类型  同时赋值+解构
const {
  title = '江山如此多娇,引无数英雄竞折腰',
  msg,
  user
} = defineProps<{
  title?:string
  user:Iuser
  msg?:string
}>()
</script>

<style scoped>
body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
